import { forwardRef } from "react";
import { Popup } from '@antmjs/vantui'
import useInitAction from "@/hooks/useInitAction";
import { View, Image,Text } from "@tarojs/components";
import { IOrderDetailData } from "@/typing";
import closeIcon from '@/assets/images/close-icon.png';
import { API_URL } from "@/common/serviveApi";
import dayjs from "dayjs";
import Taro from "@tarojs/taro";
import { showToast } from "@/common/util";
interface IOrderDetailDialog {
    show: boolean;
    orderInfo: IOrderDetailData;
    handlePopStatus: (status) => void;

}

const OrderDetailDialog: React.FC<IOrderDetailDialog> = forwardRef((props, ref) => {
    const { bottomSafeHeight } = useInitAction();
    const { show, handlePopStatus, orderInfo } = props;
    const handleCopy = (data) => {
        Taro.setClipboardData({
            data: data,
            success: () => {
                showToast('复制成功')
            }
        })
    }
    return <>
        <Popup show={show} position="bottom" closeOnClickOverlay={true} onClickOverlay={() => handlePopStatus(false)} overlay={true} safeAreaInsetBottom={false} style={{ paddingBottom: bottomSafeHeight > 0 ? bottomSafeHeight + 'px' : '84rpx', borderTopRightRadius: '12px', borderTopLeftRadius: '12px' }}>
            <View className="pt-30px box-border">
                <View className="flex items-center justify-end px-36px box-border">
                    <Image src={closeIcon} className="w-36px h-36px" onClick={() => handlePopStatus(false)}></Image>
                </View>
                <View className="w-684px  bg-#F9F9F9 px-28px pt-22px pb-26px box-border flex items-center mx-auto mt-22px justify-center">
                    <View className="w-66px h-66px rounded-100px overflow-hidden">
                        <Image src={`${API_URL}${orderInfo.avatar}`} className="w-66px h-66px"></Image>

                    </View>
                    <View className="ml-20px flex-1">
                        <View className="text-#161618 text-32px font-bold">{orderInfo.nickname}</View>
                        {orderInfo.remark && <View className="text-#555555 text-24px  mt-10px">{orderInfo.remark}</View>}
                       

                    </View>
                </View>
                <View className="mt-28px mx-auto w-684px box-border px-30px pb-40px pt-34px bg-#F9F9F9">
                    <View className="flex items-center text-#333333 text-28px">
                        <Text className="text-#333333 font-medium">订单编号</Text>
                        <View className="ml-24px font-medium">
                            <Text className="text-#333333 ">{orderInfo.order_sn}</Text>
                            <Text className="text-#8232E8 ml-6px" onClick={() => handleCopy(orderInfo.order_sn)}>复制</Text>

                        </View>
                    </View>
                    
                    <View className="flex items-center text-#333333 text-28px mt-15px">
                        <Text className="text-#333333 font-medium">创建时间</Text>
                        <View className="ml-24px font-medium">
                            {dayjs.unix(orderInfo.create_time).format('YYYY-MM-DD HH:mm:ss')}
                        </View>
                    </View>
                    
                    {
                       ( orderInfo.status === 1 || orderInfo.status === 2 )&& <>
                        <View className="flex items-center text-#333333 text-28px mt-15px">
                            <Text className="text-#333333 font-medium">接单时间</Text>
                            <View className="ml-24px font-medium">
                                {dayjs.unix(orderInfo.accept_time).format('YYYY-MM-DD HH:mm:ss')}
                            </View>
                        </View>
                        {/* <View className="flex items-center text-#333333 text-28px mt-15px">
                            <Text className="text-#333333 font-medium">完成时间</Text>
                            <View className="ml-24px font-medium">
                                {dayjs.unix(orderInfo.complete_expire_time).format('YYYY-MM-DD HH:mm:ss')}
                            </View>
                        </View> */}
                        </>
                    }
                    {orderInfo.status === 2 && <View className="flex items-center text-#333333 text-28px mt-15px">
                        <Text className="text-#333333 font-medium">完成时间</Text>
                        <View className="ml-24px font-medium">
                            {dayjs.unix(orderInfo.complete_time).format('YYYY-MM-DD HH:mm:ss')}
                        </View>
                    </View>}

                    {orderInfo.status === -1 && <>
                    {orderInfo.cancel_reason&&<View className="flex items-center text-#333333 text-28px mt-15px">
                        <Text className="text-#333333 font-medium">取消原因</Text>
                        <View className="ml-24px font-medium">
                            {orderInfo.cancel_reason}
                        </View>
                    </View>}
                        
                    <View className="flex items-center text-#333333 text-28px mt-15px">
                        <Text className="text-#333333 font-medium">取消时间</Text>
                        <View className="ml-24px font-medium">
                            {dayjs.unix(orderInfo.cancel_time).format('YYYY-MM-DD HH:mm:ss')}
                        </View>
                    </View>
                    </>}



                </View>
            </View>

        </Popup>

    </>
})
export default OrderDetailDialog